JavaScript - tutorial - 20 - lexical structure

revision:


Content

every programming language has a lexical structure scope


every programming language has a lexical structure

top

A lexical structure is a set of basic rules that must be followed when writing code in a language, such as how to write comments and name variables.

JavaScript is written in Unicode

unicode is an international encoding standard supported by almost every writing system and is used in JavaScript, which means you can use emojis or Japanese characters in your code, for instance.

Whitespace

White space characters improve the readability of source text and separate tokens from each other. These characters are usually unnecessary for the functionality of the code. Minification tools are often used to remove whitespace in order to reduce the amount of data that needs to be transferred.

Whitespace does not affect code in JavaScript. You can hit indent and tab as much as you want but if I'm working in an already existing codebase, I usually follow their formal or style of indenting. If you're more experienced with coding, you may be aware of tools like Prettier, which help format your code to be readable.

Semicolons are optional

Semicolons are generally used to indicate the end of a statement, but they are not mandatory. You will not encounter an error if you were to choose to not end a variable you declare with a semicolon. However, semicolons make code more readable.

JavaScript is case-sensitive

The spelling of the names of your variables, functions, keywords and other identifiers must be exact. So that means myName and MyName are not the same.

Comments

Comments are used to add hints, notes, suggestions, or warnings to JavaScript code. This can make it easier to read and understand. They can also be used to disable code to prevent it from being executed; this can be a valuable debugging tool.

There are 2 different ways to create comments.

line comments : you can make a single line comment using 2 forward slashes ( // )
block comments : create a multi-line comment using a forward slash and an asterisk ( */ ) to create longer, more meaningful comments if you need to.

Identifiers

Identifiers are names. It's how we create references to our variables and functions. You can start any variable name with a dollar sign, underscore or letter.

The main rule is to not use numbers as the first character in our identifiers.

JavaScript identifiers are not only limited to ASCII. Many Unicode codepoints are allowed as well. Namely, any character in the ID_Start category can start an identifier, while any character in the ID_Continue category can appear after the first character. In addition, JavaScript allows using Unicode escape sequences in the form of \u0000 or \u{000000} in identifiers, which encode the same string value as the actual Unicode characters.

Reserved words

Many of these "reserved words" are already used in JavaScript. The following keywords cannot be used as identifiers for variables, functions, classes, etc. anywhere in JavaScript source: break, case, catch, class, const, continue, debugger, default, delete, do, else, export, extends, false, finally, for, function, if, import, in, instanceof, new, null, return, super, switch, this, throw, true, try, typeof, var, void, while, with.

Literals

A literal is a piece of data that appears directly in a program such as numbers, strings (text encapsulated by quotation marks), boolean values and null.


scope

top

Scope in JavaScript refers to the current context of code, which determines the accessibility of variables to JavaScript. There are two types of scope in JS: global scope and local scope.

Points to remember:

1/ variables defined inside a function are in the local scope,
2/ variables defined outside of a function are in the global scope,
3/ each function when invoked creates a new scope.

Global scope

When you start writing JavaScript in a document, you are already in the global scope. There is only one global scope throughout a JavaScript document. A variable is in the global scope if it's defined outside of a function.
Variables inside the global scope can be accessed and altered in any other scope.

Local scope

Variables defined inside a function are in the local scope, and they have a different scope for every call of that function. This means that variables having the same name can be used in different functions. This is because those variables are bound to their respective functions, each having different scopes, and are not accessible in other functions. This also tells us that variables having the same name in different execution contexts gain precedence from top to bottom of the execution stack. A variable, having a name similar to another variable, in the innermost function (topmost context of the execution stack) will have higher precedence.

Block statements

Block statements - like "if" and "switch" conditions or "for" and "while" loops -, unlike functions, don't create a new scope. Variables defined inside of a block statement will remain in the scope they were already in. Contrary to the "var" keyword, the "let" and "const" keywords support the declaration of local scope inside block statements.

Lexical scope

Lexical Scope means that in a nested group of functions, the inner functions have access to the variables and other resources of their parent scope. This means that the child's functions are lexically bound to the execution context of their parents. Lexical scope is sometimes also referred to as "static scope".

Lexical environment

Every time the JavaScript engine creates an execution context to execute the function or global code, it also creates a new lexical environment to store the variable defined in that function during the execution of that function. A lexical environment is a data structure that holds an identifier-variable mapping (here identifier refers to the name of variables/functions, and the variable is the reference to actual object [including function type object] or primitive value). A lexical environment has two components: 1/ "environment record" is the actual place where the variable and function declarations are stored, 2/ "reference to the outer environment" means it has access to its outer (parent) lexical environment.